<template>
  <div>
    <a-button
      v-if="
        button.add.visible &&
        (button.add.type == 'all' || button.add.view.includes(zeroCodeId))
      "
      type="link"
      icon="plus"
      @click="
        click({
          type: eipZeroCodeSystemButton.add,
        })
      "
    >
      {{
        settingJson && settingJson.data && settingJson.data.name
          ? settingJson.data.name
          : button.add.label
      }}</a-button
    >
    <a-button
      v-if="
        button.edit.visible &&
        (button.edit.type == 'all' || button.edit.view.includes(zeroCodeId))
      "
      type="link"
      icon="edit"
      @click="
        click({
          type: eipZeroCodeSystemButton.edit,
        })
      "
    >
      {{ button.edit.label }}</a-button
    >
    <a-button
      v-if="
        button.delete.visible &&
        (button.delete.type == 'all' || button.delete.view.includes(zeroCodeId))
      "
      type="link"
      @click="
        click({
          type: eipZeroCodeSystemButton.delete,
        })
      "
    >
      <a-icon type="delete" style="color: #ff4d4f"></a-icon>
      <span class="text-red"> {{ button.delete.label }} </span>
    </a-button>
    <a-button
      v-if="button.copy.visible"
      type="link"
      icon="copy"
      @click="
        click({
          type: eipZeroCodeSystemButton.copy,
        })
      "
    >
      {{ button.copy.label }}</a-button
    >
    <a-button v-if="button.import.visible" type="link" icon="import">
      {{ button.import.label }}</a-button
    >
    <a-dropdown v-if="button.export.visible">
      <a-menu slot="overlay">
        <a-menu-item key="1">
          <a-icon type="file-excel" />导出记录(excel)
        </a-menu-item>
        <a-menu-item key="2"> <a-icon type="file-zip" />导出附件 </a-menu-item>
        <a-menu-item key="3"> <a-icon type="file-pdf" />导出PDF </a-menu-item>
      </a-menu>
      <a-button type="link" icon="download">
        {{ button.export.label }}
        <a-icon type="down" />
      </a-button>
    </a-dropdown>

    <a-dropdown v-if="button.print.visible">
      <a-menu slot="overlay">
        <a-menu-item key="1">
          <a-icon type="file-excel" />导出记录(excel)
        </a-menu-item>
        <a-menu-item key="2"> <a-icon type="file-zip" />导出附件 </a-menu-item>
        <a-menu-item key="3"> <a-icon type="file-pdf" />导出PDF </a-menu-item>
      </a-menu>
      <a-button type="link" icon="printer">
        {{ button.print.label }}
        <a-icon type="down" />
      </a-button>
    </a-dropdown>

    <a-button
      v-if="button.recycle.visible"
      type="link"
      icon="rest"
      @click="
        click({
          type: eipZeroCodeSystemButton.recycle,
        })
      "
    >
      {{ button.recycle.label }}</a-button
    >
    <a-button
      :key="item.id"
      v-for="item in custom"
      type="link"
      :icon="item.icon"
      @click="
        click({
          button: item,
        })
      "
    >
      {{ item.name }}</a-button
    >
  </div>
</template>

<script>
export default {
  components: {},
  name: "toolbar-buttons",
  computed: {},
  data() {
    return {
      button: {
        add: {
          label: "新增",
          visible: false,
          type: "all",
          view: [],
        },
        edit: {
          label: "编辑",
          visible: false,
          type: "all",
          view: [],
        },
        delete: {
          label: "删除",
          visible: false,
          type: "all",
          view: [],
        },
        copy: {
          label: "复制",
          visible: false,
          type: "all",
          view: [],
        },
        import: {
          label: "导入",
          visible: false,
          type: "all",
          view: [],
        },
        export: {
          label: "导出",
          visible: false,
          type: "all",
          view: [],
        },
        print: {
          label: "打印",
          visible: false,
          type: "all",
          view: [],
        },
        recycle: {
          label: "回收站",
          visible: false,
          type: "all",
          view: [],
        },
      },

      custom: [],
    };
  },
  watch: {
    settingJson: {
      handler: function (val, oldVal) {
        this.button = val.function;
        this.initButton();
      },
      deep: true,
    },
  },
  created() {
    this.button = this.settingJson.function;
    this.initButton();
  },
  props: {
    settingJson: Object,
    //低代码Id
    zeroCodeId: {
      type: String,
    },
    //菜单Id
    menuId: {
      type: String,
    },
  },
  methods: {
    /**
     * 按钮初始化
     */
    initButton() {
      this.custom = [];
      //只显示工作流和填写当前表单字段按钮
      let buttons = this.settingJson.button.filter(
        (f) =>
          f.action == this.eipZeroCodeFormSettingButtonAction.workflow ||
          (f.action == this.eipZeroCodeFormSettingButtonAction.form &&
            f.form.target == this.eipZeroCodeFormSettingButtonFormTarget.now &&
            f.form.write == this.eipZeroCodeFormSettingButtonFormWrite.field)
      );

      this.custom = buttons;
    },
    /**
     * 触发事件
     * @param type
     */
    click(data) {
      this.$emit("click", data);
    },
  },
};
</script>

<style lang="less"></style>
